<template>
  <div id='intro-main'>
    <div id="intro-inner">
      <div id="intro-title">
        {{ isOverview ? routeTitle : node.title }}
      </div>

      <div id="node-container">

        <div id="node">
          <div id="resource">
            <!-- <a-collapse v-model="activeKey">
                    <a-collapse-panel key="1"
                                      header="This is panel header 1">
                      <p>{{ text }}</p>
                    </a-collapse-panel>
                  </a-collapse> -->
            <div style="text-align: center;" v-if="isOverview">
              <div style="display:inline-block; width: 100%;">
                <a-tag color="orange" v-for="tag in tags" :key="tag">
                  {{ tag }}
                </a-tag>
              </div>
            </div>
            <el-divider></el-divider>
            <el-collapse accordion v-if="!isOverview">
              <el-collapse-item name="1">
                <template slot="title">
                  <i class="header-icon el-icon-collection"></i>&nbsp;&nbsp;本结点学习资源
                </template>
                <div v-for="resource in node.resources" :key="resource.id">
                  <el-link :underline="false" :href="resource.url" style="line-height: 20px;">
                    <a-icon type="right-circle" />&nbsp;&nbsp;{{ resource.title }}
                  </el-link>
                </div>
              </el-collapse-item>

            </el-collapse>
          </div>
          <div class="ql-snow">
            <div id="description" class="ql-editor" v-html="isOverview ? routeDescription : node.description">
            </div>
          </div>
          <div class="learned" v-if="alreadyStudied && !isAudit">
            已完成
            <a-icon type="check" />
          </div>
          <div class="learned" @click="nextPage" v-else-if="!isOverview && !isAudit">
            {{ '学完了' }}
            <a-icon type="arrow-right" />
          </div>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'


export default {
  props: {
    node: {
      id: String,
      title: String,
      description: String,
    },
    isOverview: Boolean,
    routeTitle: String,
    isAudit: Boolean,
    routeDescription: String,
    alreadyStudied: Boolean,
    learned: Boolean,
    tags: [],
  },
  data() {
    return {
      resource: []
    }
  },
  // data() {
  //   return {
  //     node: {
  //       title: 'css类选择器',
  //       resource: [],
  //       description: '',
  //     },
  //   }
  // },
  methods: {
    nextPage() {
      if (this.learned) {
        this.$bus.$emit('finishNode')
      } else {
        this.$alert('请先点击开始学习按钮', '提示', {
          center: true
        })
      }

    },
    // showResource() {
    //   request.get('/route/node/detail', {
    //     params: {
    //       id: this.node.id
    //     }
    //   }).then((res) => {
    //     if (res.data.code === 200) {
    //       this.resource = res.data.data.resources
    //     } else {
    //       Message({
    //         type: 'error',
    //         message: res.data.msg,
    //         customClass: 'message-global'
    //       })
    //     }
    //   }).catch((err) => {
    //     Message({
    //       type: 'error',
    //       message: err,
    //       customClass: 'message-global'
    //     })
    //   })
    // }
  },
}
</script>

<style scoped>
:deep .el-collapse {
  border-radius: 5px !important;
  background-color: rgba(196, 225, 255, 0.5) !important;
  padding-left: 20px;
}

:deep .el-collapse-item {
  border-radius: 5px !important;
  background-color: transparent !important;
  line-height: 50px !important;
}

:deep .el-collapse-item__wrap {
  border-radius: 15px !important;
  background-color: transparent !important;
  line-height: 50px !important;
}

:deep .el-collapse-item__header {
  border-radius: 15px !important;
  background-color: transparent !important;
  line-height: 50px !important;
}

:deep .el-collapse-item__content {
  line-height: 30px !important;
}

#intro-main {
  height: 70%;
  max-height: 70%;
  padding: 0px 50px 10px 50px;
}

#intro-inner {
  border: 1px solid;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: auto;
}

#intro-title {
  /* border: solid; */
  margin-top: 20px;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 80px;
  height: 80px;
}

#node-container {
  /* border: solid; */
  line-height: 30px;
  padding: 0px 20px 20px 20px;
}

#node {
  padding: 0px 50px 20px 50px;
  border-radius: 10px;
}

#description {
  margin-top: 20px;
  width: 100%;
  min-height: 340px;
}

.learned {
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
  transition: color 0.5s;
  color: #0072e3;
}

.learned:hover {
  color: #409eff;
  cursor: pointer;
}
</style>